<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <div class="mb-3">
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </div>
        <div class=" flex items-center justify-start">
          <el-date-picker
            class="mr-5"
            clearable
            v-model="date_value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="handleChangeDate"
          >
          </el-date-picker>

          <el-input
            clearable
            class="mr-5"
            style="width: 25%"
            v-model="listQuery.question_id"
            placeholder="请输入问题编号"
          ></el-input>
          <el-input
            clearable
            class="mr-5"
            style="width: 25%"
            v-model="listQuery.question_name"
            placeholder="请输入问题名称"
          ></el-input>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </div>
      </div>
      <el-table border :data="menuList" style="width: 100%">
        <el-table-column prop="id" label="问题编号"> </el-table-column>
        <el-table-column prop="name" label="问题名称"> </el-table-column>
        <el-table-column prop="sort" label="排序"> </el-table-column>
        <el-table-column prop="helpful_rate" label="有助率"> </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
        <el-table-column prop="updated_at" label="更新时间"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" width="280">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="handleDetail(scope.row)"
              >详情</el-button
            >
            <el-button
              type="primary"
              plain
              size="mini"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              v-if="scope.row.status !== 1"
              type="primary"
              plain
              size="mini"
              @click="handleChangeStatus(scope.row.id)"
            >
              启用
            </el-button>
            <el-button
              v-else
              type="danger"
              plain
              size="mini"
              @click="handleChangeStatus(scope.row.id)"
              >禁用</el-button
            >
            <el-button
              type="danger"
              plain
              size="mini"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <cus-pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="handleGetData"
      />
    </el-card>

    <detailModal
      :detailDialogVisible.sync="detailDialogVisible"
      :id="rowData.id"
    ></detailModal>

    <addEditModal
      :dialogVisible.sync="dialogVisible"
      :title.sync="title"
      :id="rowData.id"
      @updateTable="handleSearch"
    ></addEditModal>

    <!-- 删除弹框 -->
    <el-dialog
      title="确定删除吗?"
      :visible.sync="deleteDialogVisible"
      width="435px"
    >
      <span style=""
        ><em style="font-style: normal; color: red">删除后不可恢复</em
        >，你还要继续吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmDel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import addEditModal from "./childComps/addEditModal.vue";
import detailModal from "./childComps/detailModal.vue";

import {
  getData,
  putStatusData,
  deleteData
} from "@/api/config/onlineQuestion";

export default {
  name: "",
  components: {
    addEditModal,
    detailModal
  },
  data() {
    return {
      date_value: "",
      listQuery: {
        page: 1,
        page_size: 10,
        created_date_start: undefined,
        created_date_end: undefined,
        question_name: undefined,
        question_id: undefined
      },
      total: 0,
      menuList: [],
      dialogVisible: false,
      detailDialogVisible: false,
      deleteDialogVisible: false,

      title: "Add",
      rowData: {}
    };
  },
  created() {
    this.handleGetData();
  },
  methods: {
    /** 筛选条件 时间改变事件 */
    handleChangeDate(value) {
      if (value) {
        this.listQuery.created_date_start = value[0];
        this.listQuery.created_date_end = value[1];
      } else {
        this.listQuery.created_date_start = undefined;
        this.listQuery.created_date_end = undefined;
      }
    },

    handleGetData() {
      getData(this.listQuery).then(res => {
        this.menuList = res.data.data;
        this.total = res.data.total;
      });
    },
    handleSearch() {
      this.listQuery.page = 1;
      this.handleGetData();
    },
    handleReset() {
      this.listQuery = {
        page: 1,
        page_size: 10,
        created_date_start: undefined,
        created_date_end: undefined,
        question_name: undefined,
        question_id: undefined
      };
      this.date_value = null;
      this.handleGetData();
    },
    handleAdd() {
      this.title = "Add";
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.rowData = row;
      this.title = "Edit";
      this.dialogVisible = true;
    },
    handleDetail(row) {
      this.rowData = row;
      this.detailDialogVisible = true;
    },
    handleChangeStatus(id) {
      putStatusData(id).then(res => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.handleGetData();
        }
      });
    },
    handleDelete(row) {
      this.rowData = row;
      this.deleteDialogVisible = true;
    },
    handleConfirmDel() {
      deleteData(this.rowData.id).then(res => {
        if (res.code === 200) {
          this.handleGetData();
          this.deleteDialogVisible = false;
          this.$notify({
            type: "success",
            message: "操作成功",
            position: "bottom-right",
            showClose: false,
            duration: 3000
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>
